<template>
	<view class="container">
		<view class="main-content">
			<view class="main">
				<view class="card">
					<view class="userinfo text-lg" @tap="$wanlshop.auth('/pages/user/setting/user')">
						<view class="avatar round margin-right-xs"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 50, 50, 2, 'avatar') + ')' }">
						</view>
						<view class="userinfo-right">
							<text class="nickname">{{ user.nickname }}</text>
							<text v-if="user.is_vip" class="vipexpire">VIP会员至: {{vip_expired_date}}到期</text>
							<text v-else class="vipexpire">未开通会员</text>
						</view>
					</view>
					<view class="card-label">
						<text>百润茂VIP</text>
					</view>
				</view>
				<view class="power">
					<view class="power-label">
						<uv-line length="80rpx" color="#3A3B3F" margin="0rpx 10rpx" :hairline="false"></uv-line>
						<text>会员特权</text>
						<uv-line length="80rpx" color="#3A3B3F" margin="0rpx 10rpx" :hairline="false"></uv-line>
					</view>
					<view class="power-list">
						<view class="power-item" v-for="(item, index) in power" :key="index">
							<view class="power-icon">
								<image :src="item.icon"></image>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 优化后的限时优惠提示 -->
			<view class="discount-banner" v-if="tipsText.length > 0">
				<view class="discount-content">
					<text class="discount-icon">🔥</text>
					<text class="discount-text">限时优惠！活动截止2025年12月31日！</text>
				</view>
			</view>

			<view class="spec">
				<view class="spec-item" v-for="(item, index) in vip" :key="item.id"
					:class="{ 'selected': selectedIndex === index }" @click="selectItem(index)">
					<text class="item-discount">{{item.text}}</text>
					<text class="item-day">{{item.title}}</text>
					<text class="item-newprice"><text class="rmb">￥</text>{{item.vip_price}}</text>
					<text class="item-oldprice">￥{{item.vip_market_price}}</text>
				</view>
			</view>
		</view>

		<!-- 底部栏 -->
		<view class="btm">
			<text>价格：￥{{vip[selectedIndex].vip_price}} </text>
			<view class="btn" @click="confirm">立即开通</view>
		</view>

		<wanl-pay-password :show="showPasswordModal" :value="paymentPassword" @submit="handlePasswordSubmit"
			@cancel="handleCancel" @setPayPwd="setPayPwd" @forgetPayPwd="forgetPayPwd"></wanl-pay-password>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import WanlPayPassword from '@/components/wanl-pay-password/wanl-pay-password.vue';
	export default {
		components: {
			WanlPayPassword
		},
		data() {
			return {
				power: [{
						name: "会员标志",
						icon: "https://api.bearing-mall.com/uploads/miniappimg/vip/icon1.png"
					},
					{
						name: "专属优惠",
						icon: "https://api.bearing-mall.com/uploads/miniappimg/vip/icon3.png"
					},
					{
						name: "消息通知",
						icon: "https://api.bearing-mall.com/uploads/miniappimg/vip/icon5.png"
					},
					{
						name: "专属客服",
						icon: "https://api.bearing-mall.com/uploads/miniappimg/vip/icon8.png"
					}
				],
				spec: [{
						month: "1",
						oldprice: "30",
						newprice: "25",
						discount: "5"
					},
					{
						month: "3",
						oldprice: "68",
						newprice: "90",
						discount: "22"
					},
					{
						month: "12",
						oldprice: "360",
						newprice: "248",
						discount: "112"
					}
				],
				selectedIndex: 0,
				vip: [],
				vip_expired_date: "",

				showPasswordModal: false, // 控制显示密码输入框的状态
				paymentPassword: '', // 存储用户输入的支付密码
				tipsText: this.$store.state.common.appConfig.tips_text
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			this.getVipGoodsList();

			// let config = uni.getStorageSync('wanlshop:appconfig');
			// this.vip[0].price = config.vip_price;
			// this.vip[0].days = config.vip_expired_days;
			// this.vip[0].article_id = config.vip_link_article_id;

			const user = uni.getStorageSync('wanlshop:user');
			console.log(user, this.$store.state.user)
			if (user.vip_expired_time && user.vip_expired_time > 0) {
				const timestamp = user.vip_expired_time * 1000;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(date.getDate()).padStart(2, '0');
				this.vip_expired_date = `${year}-${month}-${day}`;
			}
		},
		methods: {
			async getVipGoodsList() {
				uni.request({
					url: '/wanlshop.user/getVipGoods',
					method: 'POST',
					data: {},
					success: res => {
						this.vip = res.res.data;
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: err.errMsg
						});
					}
				});
			},
			selectItem(index) {
				console.log(index)
				this.selectedIndex = index;
			},

			//确认支付
			confirm() {
				let vip_open_type = this.$store.state.common.appConfig.vip_open_type;
				if (vip_open_type == 'balance') {
					this.showPasswordModal = true;
				} else {
					this.becomeVipFromWechat()
				}
			},

			// 处理密码提交
			handlePasswordSubmit(password) {
				this.paymentPassword = password;
				// 验证支付密码
				uni.request({
					url: '/wanlshop.user/verifyPayPassword',
					method: 'POST',
					data: {
						password: password
					},
					success: res => {
						if (res.res.code == 4010) {
							this.$wanlshop.msgJump(res.res.msg, '/pages/user/auth/setpaypwd', 2000, true,
								'error');
							return false;
						}
						if (res.res.code == 1) {
							this.becomeVipFromGoodsApi();
							// this.becomeVipApi();
						} else {
							this.$wanlshop.msg(res.res.msg)
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: err.errMsg
						});
					}
				});

				this.showPasswordModal = false;
				this.paymentPassword = '';
			},
			// 关闭密码输入框
			handleCancel() {
				this.showPasswordModal = false;
				this.paymentPassword = '';
			},

			forgetPayPwd: function() {
				this.$wanlshop.to(
					`/pages/user/auth/validcode?event=forgetpaypwd&mobile=${this.$store.state.user.mobile}`)
			},
			setPayPwd: function() {
				this.$wanlshop.to(`/pages/user/auth/setpaypwd?mobile=${this.$store.state.user.mobile}`)
			},

			async becomeVipApi(data, code = null) {
				await uni.request({
					url: '/wanlshop/user/becomeVip',
					method: 'POST',
					data: {},
					success: res => {
						if (res.res.code == 4011) {
							this.$wanlshop.msgJump(res.res.msg, '/pages/user/money/recharge', 2000, true,
								'error');
							return false;
						}
						this.$wanlshop.msg(res.res.msg, 2000, true, 'success');
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					},
					complete: (res) => {
						if (res.res.code == 0) {
							this.$wanlshop.msg(res.res.msg, 2000, true, 'error');
							if (res.res.code == 4011) {
								setTimeout(() => {
									this.$wanlshop.to('/pages/user/money/recharge');
								}, 2000)
							}
						}
					}
				});
			},
			async becomeVipFromGoodsApi(data, code = null) {
				let vipId = this.vip[this.selectedIndex].id;
				if (vipId == 0) {
					this.$wanlshop.msg("请选择要开通的VIP", 2000, true, 'error');
					return false;
				}
				await uni.request({
					url: '/wanlshop/user/becomeVipFromGoods',
					method: 'POST',
					data: {
						vipId: vipId
					},
					success: res => {
						if (res.res.code == 4011) {
							this.$wanlshop.msgJump(res.res.msg, '/pages/user/money/recharge', 2000, true,
								'error');
							return false;
						}
						this.$wanlshop.msg(res.res.msg, 2000, true, 'success');

						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					},
					complete: (res) => {
						if (res.res.code == 0) {
							this.$wanlshop.msg(res.res.msg, 2000, true, 'error');
							if (res.res.code == 4011) {
								setTimeout(() => {
									this.$wanlshop.to('/pages/user/money/recharge');
								}, 2000)
							}
						}
					}
				});
			},
			// 微信支付
			becomeVipFromWechat() {
				let vipId = this.vip[this.selectedIndex].id;
				if (vipId == 0) {
					this.$wanlshop.msg("请选择要开通的VIP", 2000, true, 'error');
					return false;
				}

				uni.login({
					success: (e) => {
						uni.request({
							url: '/wanlshop/user/becomeVipFromWechatPay',
							method: 'POST',
							data: {
								vipId: vipId,
								paymentCode: e.code
							},
							success: result => {
								console.log(result, 'resultresultresultresult')
								if (result.res.code == 1) {
									wx.requestCommonPayment({
										signData: result.data.signData,
										mode: result.data.mode,
										paySig: result.data.paySig,
										signature: result.data.signature,
										success: res => {
											this.$wanlshop.msg('支付成功', 2000, true,
												'success');

											setTimeout(() => {
												uni.navigateBack();
											}, 2000)
										},
										fail: res => {
											console.log(res.errMsg);
											console.log(3334445689, res);
											self.showError('订单未支付成功', () => {
												payError(result, fail);
											});
										},
									})
								} else {
									this.$wanlshop.msg(result.res.msg, 2000, true, 'error');

									setTimeout(() => {
										uni.navigateBack();
									}, 2000)
								}
								// uni.requestPayment({
								// 	provider: "wxpay",
								// 	appId: res.data.appId,
								// 	nonceStr: res.data.nonceStr,
								// 	package: res.data.package,
								// 	paySign: res.data.paySign,
								// 	signType: res.data.signType,
								// 	timeStamp: res.data.timeStamp,
								// 	success: (e) => {
								// 		this.$wanlshop.msg('支付成功', 2000, true, 'success');

								// 		setTimeout(() => {
								// 			uni.navigateBack();
								// 		}, 2000)
								// 	},
								// 	fail: (e) => {
								// 		console.log(e,'error')
								// 		uni.showModal({
								// 			content: "支付失败,原因为: " + e.errMsg,
								// 			showCancel: false
								// 		})
								// 	}
								// })
							},
							complete: (res) => {
								if (res.res.code == 0) {
									this.$wanlshop.msg(res.res.msg, 2000, true, 'error');
									if (res.res.code == 4011) {
										setTimeout(() => {
											this.$wanlshop.to(
												'/pages/user/money/recharge');
										}, 2000)
									}
								}
							}
						});
					},
					fail: (e) => {
						uni.showModal({
							content: "无法获取微信code,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #191B1F;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: 120rpx;
	}

	.main-content {
		flex: 1;
		overflow-y: auto;
	}

	.main {
		background: #212327;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 20rpx;

		.card {
			height: 240rpx;
			background: #3E3533;
			border-radius: 20rpx;
			padding: 32rpx;
			background-image: url('https://api.bearing-mall.com/assets/addons/wanlshop/img/vip/card-bg1.png');
			background-repeat: no-repeat;
			background-size: 70%;
			background-position: 90% 100%;

			.userinfo {
				display: flex;

				.avatar {
					width: 88rpx;
					height: 88rpx;
					background-size: cover;
					background-position: center;
				}

				.userinfo-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 10rpx;

					.nickname {
						color: #FFFFFF;
						font-size: 36rpx;
					}

					.vipexpire {
						color: #7E7D83;
						font-size: 24rpx;
						padding-left: 4rpx;
					}
				}
			}

			.card-label {
				padding: 20rpx 0rpx;

				text {
					font-size: 50rpx;
					font-weight: 600;
					background: linear-gradient(90deg, #D9B88D 0%, #FFF3C2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.power {
			padding: 48rpx 0rpx 0rpx;

			.power-label {
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					color: #C6C7CB;
					font-size: 28rpx;
				}
			}

			.power-list {
				padding: 48rpx 0rpx 20rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;

				.power-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-bottom: 36rpx;

					.power-icon {
						width: 88rpx;
						height: 88rpx;
						border-radius: 99rpx;
						padding: 20rpx;
						background: #32323B;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					text {
						color: #97999D;
						font-size: 22rpx;
						padding-top: 16rpx;
					}
				}
			}
		}
	}

	.discount-banner {
		background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(247, 147, 30, 0.3);

		.discount-content {
			display: flex;
			align-items: center;
			justify-content: center;

			.discount-icon {
				font-size: 32rpx;
				margin-right: 10rpx;
			}

			.discount-text {
				color: #FFFFFF;
				font-size: 26rpx;
				font-weight: 500;
				text-align: center;
			}
		}
	}

	.spec {
		// margin-top: 20rpx; // 添加这一行
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		padding: 30rpx 20rpx;
		// margin: 48rpx 0rpx;

		.spec-item {
			background: #212327;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			border: 1rpx solid #2D2F33;
			position: relative;
			padding: 20rpx;

			.item-discount {
				background: linear-gradient(90deg, #A0CBEA 0%, #E5B6B1 100%);
				font-size: 24rpx;
				font-weight: 700;
				color: #191B1F;
				width: 60%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				top: 0;
				border-top-right-radius: 6rpx;
				border-bottom-left-radius: 12rpx;
				padding: 12rpx 8rpx;
			}

			.item-day {
				font-size: 28rpx;
				color: #EEF0F4;
				padding: 30rpx 0rpx 20rpx 0rpx;
			}

			.item-newprice {
				font-size: 45rpx;
				color: #EEE6C4;
				padding: 30rpx 0rpx 10rpx;
			}

			.item-oldprice {
				font-size: 36rpx;
				color: #D8D5D8;
				text-decoration: line-through;
				padding-top: 10rpx;
			}

			.rmb {
				font-size: 36rpx;
			}
		}

		.spec-item.selected {
			border-color: #EEE6C4;
		}
	}

	.btm {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #2D333C;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 40rpx;

		text {
			color: #F6FCFF;
			font-size: 32rpx;
		}

		.btn {
			color: #191B1F;
			font-size: 36rpx;
			font-weight: 500;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(150, 207, 245, 1) 0%, rgba(236, 177, 176, 1) 100%);
			border: 1px solid rgba(255, 255, 255, 1);
			padding: 16rpx 48rpx;
		}
	}
</style>